{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="col-xs-12">
        <div class="widget-box">
            <div class="widget-header widget-header-flat">
                <h4 class="widget-title">{{ 'Skill group'|trans }}</h4>
            </div>
            <div class="widget-body">
                <div class="widget-main">
                    <div class="btn-group" data-toggle="buttons" id="que-button">
                        {% for key,que in queues %}
                            <label class="btn btn-primary {% if loop.first %}active{% endif %}" onclick="distribution({{ key }})" >
                                <input type="radio" name="options"  autocomplete="off"  value="{{ key }}">
                                <span id="text_{{ key }}">{{ que }}</span>&nbsp;&nbsp;&nbsp;
                            </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/><br/>
    <div class="col-xs-12">
        <div class="widget-box">
            <div class="widget-body">
                <div class="widget-main">
                    <div class="col-sm-4" id="assign_agent">
                        <div class="dd">
                            <div class="dd2-content btn-info no-hover">{{ 'To be the allocation of seats'|trans }}</div>
                            <ol class="dd-list" id="list_agent"></ol>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="dd dd-draghandle" id="drag_agent" >
                            <div class="dd2-content btn-info no-hover">{{ 'The distribution of seats'|trans }}</div>

                        </div>
                    </div>
                    <div class="well col-sm-4">
                        <h4 class="green smaller lighter">{{ 'Seat allocation instructions'|trans }}</h4>
                        <ul>
                            {% set strong = '<strong>' %}
                            {% set endstrong = '</strong>' %}
                            <li>{{ 'Click on the button in the table above distribution'|trans }}</li>
                            <li>
                                {% trans %}
                                The %strong%distribution of seats%endstrong% left to drag to the right (%strong%assigned seats%endstrong%)
                                {% endtrans %}
                            </li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="objstr" value="" />
{% endblock %}
{% block footer %}
    {% javascripts
    '@nestable_js'
    '@gritter_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        var que_ids;
        $(document).ready(function(){
            var firstVal = $('#que-button input:first').val();
            distribution(firstVal);
            que_ids = firstVal;
            $('.dd').nestable({maxDepth:1});
            $('.dd-handle a').on('mousedown', function(e){
                e.stopPropagation();
            });
        });
        function distribution(que_id) {
            $('#list_agent').html('');
            $('#que_agent').remove();
            $('.dd-empty').remove();
            que_ids = que_id;
            $.ajax({
                url: "{{ path('icsoc_queue_get_distribution') }}",
                type: "GET",
                dataType: "json",
                data: "que_id="+que_id,
                success: function(res) {
                    if (res.error == 1) {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: res.message,
                            class_name: 'gritter-error'
                        });
                    } else {
                        var list_agent = "";
                        var que_agent = '<ol class="dd-list" id="que_agent">';
                        var objstr = '';
                        for(var i=0;i<res.list_agent.length;i++){
                            var data = res.list_agent[i];
                            list_agent+="<li class='dd-item item-red' data-id='"+data.ag_id+"'><div class='dd-handle'>";
                            list_agent+=data.ag_name+'('+data.ag_num+")</div></li>";
                        }
                        for(var i=0;i<res.que_agent.length;i++){
                            var data = res.que_agent[i];
                            objstr+= data.ag_id;
                            objstr+= (i==(res.que_agent.length-1)) ? '' : ',';
                            que_agent+="<li class='dd-item item-red' data-id='"+data.ag_id+"'><div class='dd-handle'>";
                            que_agent+=data.ag_name+'('+data.ag_num+")</div></li>";
                        }
                        var emptys = '';
                        console.log(que_agent.length);
                        console.log($('.dd-empty').length);
                        //que_agent初始化值的长度；
                        if (que_agent.length <= 35 && $('.dd-empty').length<1) {
                            emptys ="<div class='dd-empty'></div>";
                            $('#drag_agent ol').html();
                        }
                        if (emptys.length > 0) {
                            $('#drag_agent').append(emptys);
                        } else {
                            $(que_agent+'</ol>').appendTo('#drag_agent');
                           // $('#drag_agent').appendTo(que_agent+'</ol>');
                            //$('#que_agent').html();
                        }
                        $('#objstr').val(objstr);
                        $('#list_agent').html(list_agent);
                    }
                }
            });
        }
        $("#assign_agent").on('change', function() {
            if (!que_ids) {
                $.gritter.add({
                    title: '{{ 'Prompt'|trans }}',
                    text: "{{ 'Please select the skill set'|trans }}",
                    class_name: 'gritter-light'
                });
                return false;
            }
            //获取que_agent中的li
            var obj =  $('.dd').nestable('serialize');
            var agents = "";
            for (var i=0; i < obj.length; i++) {
                agents+= obj[i].id;
                agents+= (i==(obj.length-1)) ? '' : ',';
            }
            var objstr = $('#objstr').val();
            if (agents == objstr) {
                return ;
            }
            if (agents.length >= 3) {
                $.ajax({
                    type: 'post',
                    url: "{{ path('icsoc_queue_set_fast_distribution') }}",
                    data: 'agents='+agents+"&que_id="+que_ids,
                    success: function (res) {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: res.message,
                            class_name: res.error ? 'gritter-error' : 'gritter-success'
                        });
                    }
                })
                $('#objstr').val(agents);
            }
        })
    </script>
{% endblock %}